<script setup>
const props = defineProps({
  title: String,
  content: String
})
const handleDropStart = (event, code) => {
  // console.log(isDraggingIndex.value, index)  // 记录正在被拖拽的代码
  event.dataTransfer.setData('text/plain', code)
}
</script>

<template>
  <div class="item">
    <header>
      {{ props.title }}
    </header>
    <section draggable="true" @dragstart="handleDropStart($event, props.content)">
      {{ props.content }}
    </section>
  </div>
</template>

<style lang="less" scoped>
@theme-color: #00a98f;
.item {
  margin-bottom: 5px;
  color: white;
  // width: calc(100% - 100px);
  width:100%;
}
header {
  border-left: 8px solid @theme-color;
  padding-left: 10px;
  margin-bottom: 10px;
}
section {
  width: 100%;
  border-radius: 5px;
  border: 2px solid @theme-color;
  text-align: center;
  padding: 5px;
  &:hover {
    cursor: pointer;
    background-color: @theme-color;
  }
}
</style>
